/* eslint-disable react/prop-types */
import React from 'react';
import { withRouter } from 'react-router-dom';
import { Layout, Icon } from 'antd';
import style from './mysite.module.scss';
import MenuList from './menuList';
import PageHead from './pageHead';
import logo from '../../assets/img/nlx.png';
import MysiteRoute from '@/router/mysiteRoute'
import ScrollView from 'react-custom-scrollbars';
import { connect } from 'react-redux';
import { saveUserInfo } from '@/store/actions';
import Api from '@/api/index';
import { getStore } from '@/utils/commons';
const { Header, Sider, Content } = Layout;


class MySite extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false,
            menuList: []
        }
    }

    //获取用户信息
    getUserInfo = (id) => {
        Api.getUserInfo(id).then(res => {
            if (res.code == 200) {
                this.props.saveUserInfo(res.data)
            }
        })
    }

    //获取下拉菜单
    getMenuList = () => {
        Api.getMenuList().then(res => {
            if (res.code == 200) {
                this.setState({
                    menuList: res.data
                })
            }
        })
    }

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    /*监听滚动*/
    onScroll = e => {
        if (e.target.scrollTop + e.target.clientHeight === e.target.scrollHeight) {
            // 滚动到底部需要做的事情
        }
    }

    componentDidMount() {
        const userId = getStore('userId');
        this.getUserInfo(userId);
    }

    render() {
        return (
            <Layout className={style.container}>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed} style={{ height: '100%' }}>
                    <ScrollView onScroll={this.onScroll}>
                        <div className={style.logo_box}>
                            <img className={style.logo} src={logo} />
                        </div>
                        <MenuList />
                    </ScrollView>
                </Sider>
                <Layout>
                    <Header className={style.page_head}>
                        {React.createElement(Icon, {
                            className: style.trigger,
                            type: this.state.collapsed ? 'menu-unfold' : 'menu-fold',
                            onClick: this.toggle,
                        })}
                        <PageHead></PageHead>
                    </Header>
                    <Content className={style.mainCont}>
                        <div className={style.scroll}>
                            <MysiteRoute />
                        </div>
                    </Content>
                </Layout>
            </Layout>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        userInfo: state.userInfo
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        saveUserInfo: (userInfo) => dispatch(saveUserInfo(userInfo))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(MySite))
